<template>
	<view class="recent-wrapper">
		<view class="recent">
			<view>
				<text class="recent-title">近期成长</text>
			</view>
			<view class="recent-content">
				<view class="item-box" v-for="(item, index) in days">
					<view class="details">
						<view>
							<text class="day">{{days[index]}}</text>
							<text class="total-star">获得星星：{{recentData[days[index]].totalStars}}</text>
						</view>
						<view class="line"></view>
						<view class="task-box" v-for="(task, idx) in recentData[days[index]].titles">
							<text class="task">{{task}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 			<view class="tabbar">
				<view class="tabbar-item" :class="{ active: currentTab === 'day' }" @click="currentTab = 'day'">
					<text class="tabbar-item-txt">日</text>
				</view>
				<view class="tabbar-item" :class="{ active: currentTab === 'month' }" @click="currentTab = 'month'">
					<text class="tabbar-item-txt">月</text>
				</view>
				<view class="tabbar-item" :class="{ active: currentTab === 'year' }" @click="currentTab = 'year'">
					<text class="tabbar-item-txt">年</text>
				</view>
			</view>
			<view class="road">
				<view v-if="currentTab === 'day'">
					{{ new Date().getDate() }}日
					<view style="display: flex; justify-content: center; flex-wrap: wrap;">
						<view style="display: flex; align-items: center; margin: 10px;">
							<text style="margin-left: 10px;">10积分</text>
							<img src="../../static/左箭头.jpg" style="width: 25px; height: 25px;" />
							<img src="../../static/OIP.jpg" style="width: 25px; height: 25px;"
								alt="star icon; display: flex; justify-content: center; flex-wrap: wrap;" />
							<img src="../../static/右箭头.jpg" style="width: 25px; height: 25px;" />
							<text style="margin-left: 10px;">数学 - 做计算</text>
						</view>
						<view style="display: flex; align-items: center; margin: 10px;">
							<text style="margin-left: 10px;">20积分</text>
							<img src="../../static/左箭头.jpg" style="width: 25px; height: 25px;" />
							<img src="../../static/OIP.jpg" style="width: 25px; height: 25px;" />
							<img src="../../static/右箭头.jpg" style="width: 25px; height: 25px;" />
							<text style="margin-left: 10px;">英语 - 写作文</text>
						</view>
					</view>
				</view>
				<view v-if="currentTab === 'month'">
					{{ new Date().getMonth() + 1 }}月
				</view>
				<view v-if="currentTab === 'year'">
					{{ new Date().getFullYear() }}年
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			recentData: {
				type: Object,
				default: {},
			},
			days: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				currentTab: 'day',
			}
		},
		updated() {
			console.log("调用recent！");
			console.log(this.recentData)
			console.log(this.days)
		},
		methods: {

		}
	}
</script>

<style>
	@import url("recent.css");
</style>